<template>
	<view class="search-root">
		<view class="search-box">
			<uni-search-bar placeholder="请输入要搜索的内容" @confirm="search" @input="input" :radius="18" cancel-button="none" />
		</view>
		<!-- 搜索建议区域 -->
		<view class="sugg-list" v-if="searchList.length > 0">
			<view class="sugg-item" v-for="(item, i) in searchList" :key="i" @click="toDetail(item.goods_id)">
				<text class="goods-name">{{item.goods_name}}</text>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<!-- 搜索记录区域 -->
		<view class="search-record" v-else>
			<view class="search-record-title">
				<text>搜索历史</text>
				<uni-icons type="trash-filled" size="17" @click="clearRecord"></uni-icons>
			</view>
			<view class="record-list">
				<uni-tag v-for="(item, i) in records" :key="i" :text="item" @click="toGoodsList(item)"></uni-tag>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				kw: '',
				searchList: [], //搜索结果
				recordList:[], //搜索历史
			};
		},
		onLoad() {
			this.recordList = JSON.parse(uni.getStorageSync('tshop-kw') || '[]')
		},
		methods: {
			//搜索输入事件处理方法
			input(v) {
				clearTimeout(this.timer)
				//防抖处理,表示500毫秒内连续输入不做处理
				this.timer = setTimeout(() => {
					this.kw = v;
					this.getSearchList()
					this.saveSearchRecords();
				}, 500)
			},
			async getSearchList() {
				if (this.kw === '') {
					this.searchList = [];
					return;
				}
				const {
					data
				} = await uni.$http.get('/api/public/v1/goods/qsearch', {
					query: this.kw
				});
				if (data.meta.status !== 200) return uni.$showMsg();
				this.searchList = data.message;
			},
			toDetail(goods_id){
				uni.navigateTo({
					url:"/subpkg/detail/detail?goods_id="+goods_id
				})
			},
			toGoodsList(kw){
				uni.navigateTo({
					url:"/subpkg/goods_list/goods_list?query="+kw
				})
			},
			saveSearchRecords(){
				const set = new Set(this.recordList);
				if(this.kw.length > 0){
					set.delete(this.kw)
					set.add(this.kw)
					this.recordList = Array.from(set)
					uni.setStorageSync('tshop-kw', JSON.stringify(this.recordList))
				}
			},
			clearRecord(){
				this.recordList = [];
				uni.clearStorageSync()
				uni.$showMsg("历史记录以清空！")
			}
		},
		computed:{
			records(){
				return [...this.recordList].reverse()
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-box {
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #c00000;
	}
	.sugg-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 5px;
		border-bottom: 1px solid #efefef;
		.goods-name{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 12px;
			padding: 12px 0;
		}
	}
	.search-record{
		padding:0 5px;
		.search-record-title {
			height: 40px;
			line-height: 40px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			text {
				font-size: 13px;
			}
		}
		.record-list{
			display: flex;
			flex-wrap: wrap;
			uni-tag{
				padding: 5px;
			}
		}
	}
</style>